<template>
  <div id="oneSend">
    <el-card class="box-card" style="margin:15px">
      <el-form
        ref="basicForm"
        :rules="basicDataRules"
        :inline="true"
        :model="basicData.model"
        class="demo-form-inline"
        size="small"
        label-width="150px"
      >
        <el-row>
          <el-col :span="6">
            <el-form-item label="所属区县:" prop="areaId.key">
              <el-select
                size="mini"
                v-model="basicData.model.areaId.key"
                placeholder="选择"
                @change="clickOrgTree"
              >
                <el-option
                  v-for="(item, index) in orgTree"
                  :key="index"
                  :label="item.label"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="所属医院:" prop="hospitalId.key">
              <el-select
                size="mini"
                v-model="basicData.model.hospitalId.key"
                placeholder="选择"
                @change="clickOrgTreeC"
              >
                <el-option
                  v-for="(item, index) in orgTreeC"
                  :key="index"
                  :label="item.label"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="所属部门:" prop="departId.key">
              <el-select size="mini" v-model="basicData.model.departId.key" placeholder="选择">
                <el-option
                  v-for="(item, index) in orgTreeCs"
                  :key="index"
                  :label="item.label"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="实验项目6项:" prop="experimentKeywords">
              <el-select size="mini" v-model="basicData.model.experimentKeywords" placeholder="全部">
                <el-option
                  v-for="(item, key, index) in dicts.EXPERIMENT_CODE"
                  :key="index"
                  :label="item"
                  :value="key"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="6">
            <el-form-item label="母亲姓名:" prop="momName">
              <el-input size="mini" v-model="basicData.model.momName" placeholder="输入" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="实验结论:" prop="experimentResult.key">
              <el-select
                size="mini"
                v-model="basicData.model.experimentResult.key"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, key, index) in dicts.EXPERIMENT_RESULT"
                  :key="index"
                  :label="item"
                  :value="key"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="通知状态:" prop="notifyStatus.key">
              <el-select size="mini" v-model="basicData.model.notifyStatus.key" placeholder="请选择">
                <!-- <el-option
                  v-for="(item, key, index) in dicts.NOTIFY_STATUS"
                  :key="index"
                  :label="item"
                  :value="key"
                />-->
                <el-option label="已通知" value="Y" />
                <el-option label="未通知" value="N" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="短信发送状态:" prop="sendStatus.key">
              <el-select size="mini" v-model="basicData.model.sendStatus.key" placeholder="请选择">
                <el-option
                  v-for="(item, key, index) in dicts.SEND_STATUS"
                  :key="index"
                  :label="item"
                  :value="key"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-col :span="24">
          <div class="select-input">
            <el-select
              size="mini"
              slot="prepend"
              v-model="timeType"
              placeholder="出生日期"
              style="width:120px !important;margin-left:3%"
            >
              <el-option
                v-for="(item, key, index) in dicts.TIME"
                :key="item"
                :label="item"
                :value="key"
              />
            </el-select>
            <el-date-picker
              size="mini"
              v-model="timeList"
              type="daterange"
              value-format="yyyy-MM-dd"
              style="width:39.5% !important"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />

            <el-select
              size="mini"
              slot="prepend"
              v-model="codeType"
              placeholder="条形码号"
              style="margin-left:2vw; width:120px !important;"
            >
              <el-option
                v-for="(item, key, index) in dicts.NUMBER"
                :key="item"
                :label="item"
                :value="key"
              />
            </el-select>
            <el-input size="mini" v-model="codeList.start" placeholder="输入" style="width:300px" />
            <span style="margin:0 10px">至</span>
            <el-input size="mini" v-model="codeList.end" placeholder="输入" style="width:300px" />
          </div>
        </el-col>
      </el-form>
      <div class="buttom">
        <el-button
          type="primary"
          size="small"
          style="width:100px"
          icon="el-icon-search"
          @click="onSubmit('query')"
        >查询</el-button>
        <el-button size="small" @click="onSubmit('reset')">清空</el-button>
      </div>
    </el-card>
    <el-card class="box-card" style="margin:5px 15px;">
      <div style="margin-bottom:10px">
        <el-button size="small" type="primary" icon="el-icon-message" @click="clickSend">短信发送</el-button>
        <el-button size="small" type="primary" icon="el-icon-message" @click="clickEditSend">编辑发送</el-button>
      </div>
      <el-table
        :data="tableData"
        style="width: 100%;padding:5px;"
        :header-cell-style="{
          background: '#333333',
          color: '#ffffff',
          textAlign: 'center'
        }"
        @selection-change="onSelectChange"
      >
        <el-table-column align="center" type="selection" width="55" />
        <el-table-column align="center" prop="hospitalId.data.label" label="所属医院" />
        <el-table-column align="center" prop="expNum" label="实验编号" width="150" />
        <el-table-column align="center" prop="momName" label="母亲姓名" />
        <el-table-column align="center" prop="bloodProperty.data" label="样本属性" />
        <el-table-column align="center" prop="experimentCode.data" label="实验项目" />
        <el-table-column align="center" prop="experimentResult.data" label="实验结论" />
        <el-table-column align="center" prop="smsSendStatus.data" label="短信发送状态" />
        <el-table-column align="center" prop="smsSendTime" label="发送日期">
          <template slot-scope="scope">
            <span>{{ scope.row.smsSendTime?scope.row.smsSendTime.substr(0, 10):'' }}</span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="basicData.current"
        :page-size="basicData.size"
        :total="total"
        layout="slot,total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
        <span
          v-if="tableData.length > 0"
          style="font-weight: 400;color:#606266"
        >已选中{{ tableData.length }}条，</span>
      </el-pagination>
    </el-card>

    <el-dialog :visible.sync="editLoading" width="60%" center custom-class="print-dialog">
      <span
        slot="title"
        class="dialog-title"
        style="font-size: 18px;font-weight: 400;color: #FFFFFF;"
      >编辑发送</span>
      <div class="edit-dialog">
        <el-row>
          <el-col :span="6">
            <span>母亲姓名:</span>
            <span>{{ selectItem.momName }}</span>
          </el-col>
          <el-col :span="6">
            <span>手机号码:</span>
            <span>{{ selectItem.phone }}</span>
          </el-col>
          <el-col :span="6">
            <span>出生日期:</span>
            <span>{{ selectItem.birthtime }}</span>
          </el-col>
          <el-col :span="6">
            <span>住院号:</span>
            <span>{{ selectItem.momName }}</span>
          </el-col>
          <el-col :span="6">
            <span>实验项目:</span>
            <span v-if="selectItem.experimentCode">
              {{
              selectItem.experimentCode.data
              }}
            </span>
          </el-col>
          <el-col :span="6">
            <span>实验结论:</span>
            <span v-if="selectItem.experimentResult">
              {{
              selectItem.experimentResult.data
              }}
            </span>
          </el-col>
          <el-col :span="6">
            <span>样本编号:</span>
            <span>{{ selectItem.momName }}</span>
          </el-col>
          <el-col :span="6">
            <span>实验编号:</span>
            <span>{{ selectItem.expnum }}</span>
          </el-col>
          <el-col :span="24">
            <span>短信内容:</span>
            <el-input
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 4 }"
              placeholder="请输入内容"
              v-model="selectItem.content"
            ></el-input>
          </el-col>
        </el-row>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button size="small" style="padding: 6px 19px;" @click="editLoading = false">关闭</el-button>
        <el-button
          size="small"
          type="primary"
          style="padding: 6px 19px;"
          @click="clickEditSendOk"
        >发送</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { initDicts } from "@/utils/commons";
import orgApi from "@/api/Org.js";
import InformManageApi from "@/api/InformManage.js";
import Project from "@/api/Project.js";

export default {
  data() {
    return {
      // 是否展示更多信息
      morderShow: true,
      // 编辑发送
      editLoading: false,
      // 表格数据
      tableData: [],
      // 字典
      dicts: {
        EXPERIMENT_RESULT: {}, //实验结论
        NOTIFY_STATUS: {}, //通知状态
        EXPERIMENT_CODE: {}, //实验项目
        SEND_STATUS: {}, //发送状态
        TIME: {}, //日期
        NUMBER: {} //编码
      },
      // 市县
      orgTree: [],
      // 医院
      orgTreeC: [],
      // 部门
      orgTreeCs: [],
      // 采样项目id；列表
      ids: [],
      //总数据
      total: 0,
      // 基本数据
      basicData: {
        current: 1,
        map: {},
        model: {
          areaId: {
            key: ""
          },
          babySex: {
            data: "",
            key: ""
          },
          barCode: {
            end: "",
            start: ""
          },
          birthTime: {
            end: "",
            start: ""
          },
          bloodNum: {
            end: "",
            start: ""
          },
          bloodTime: {
            end: "",
            start: ""
          },
          createTime: {
            end: "",
            start: ""
          },
          departId: {
            key: ""
          },
          expNum: {
            end: "",
            start: ""
          },
          experimentKeywords: "",
          experimentResult: {
            data: "",
            key: ""
          },
          experimentTime: {
            end: "",
            start: ""
          },
          freeNum: {
            end: "",
            start: ""
          },
          hospitalId: {
            key: ""
          },
          momName: "",
          notifyStatus: {
            data: "",
            key: ""
          },
          phone: "",
          reportTime: {
            end: "",
            start: ""
          },
          sendStatus: {
            data: "",
            key: ""
          },
          sendTime: {
            end: "",
            start: ""
          },
          sendType: {
            data: "",
            key: ""
          }
        },
        order: "descending",
        size: 10,
        sort: "id"
      },
      // 校验
      basicDataRules: {
        countyAndCitiesId: [
          { required: false, message: "请选择所属区县", trigger: "change" }
        ],
        hospitalId: [
          { required: false, message: "请选择所属医院", trigger: "change" }
        ],
        deptId: [
          { required: false, message: "请选择所属部门", trigger: "change" }
        ],
        motherName: [
          { required: false, message: "请输入母亲姓名", trigger: "change" }
        ],
        tel: [
          { required: false, message: "请输入手机号码", trigger: "change" }
        ],
        weight: [{ required: false, message: "请输入体重", trigger: "change" }],
        week: [{ required: false, message: "请输入孕周", trigger: "change" }],
        day: [{ required: false, message: "请输入孕天", trigger: "change" }],
        sex: [{ required: false, message: "请选择性别", trigger: "change" }],
        samplingNumber: [
          { required: false, message: "请输入采血编号", trigger: "change" }
        ],
        motherIdCard: [
          { required: false, message: "请输入条形码号", trigger: "change" }
        ]
      },
      // 当前点击行数据
      rowData: {
        // 户口类型【农村/城镇】
        accountType: {
          key: ""
        },
        // 住址
        address: "",
        // 所属区县
        areaId: {
          key: ""
        },
        // 婴儿性别【男/女/未知】
        babySex: {
          key: ""
        },
        // 条形码号
        barCode: "",
        // 出生日期
        birthTime: "",
        // 采血编号
        bloodNum: "",
        // 采血日期
        bloodTime: "",
        // 费用类型【自费/免费】
        costType: {
          key: ""
        },
        // 父亲身份证
        dadCard: "",
        // 孕天【0-6之间】
        days: "",
        // 所属部门
        departId: {
          key: ""
        },
        // 实验编号
        expNum: "",
        // 免费劵号
        freeNum: "",
        // 送检医生
        getexamineDoctor: "",
        // 医院id
        hospitalId: {
          key: ""
        },
        // 母亲身份证
        momCard: "",
        // 母亲户籍【本地/外地】
        momCensus: {
          key: ""
        },
        // 母亲姓名
        momName: "",
        // 手机号码
        phone: "",
        // 筛查备注
        remark: "",
        // 样本质量【默认合格，基础码表】
        sampleQuality: {
          key: ""
        },
        // 采血人
        samplingPeople: "",
        // 孕周【20-50之间】
        weeks: "",
        // 婴儿体重
        weight: "",
        // 实验项目
        experimentProject: []
      },
      // 当前点击行编辑数据
      selectItem: {},
      //时间类型
      timeType: "",
      //编码类型
      codeType: "",
      //时间列表
      timeList: [],
      // 编码
      codeList: {
        start: "",
        end: ""
      },
      // 选中数据
      selectList: []
    };
  },
  mounted() {
    // 获取字典
    initDicts(
      [
        "EXPERIMENT_RESULT",
        "NOTIFY_STATUS",
        "SEND_STATUS",

        "TIME",
        "EXPERIMENT_CODE",
        "NUMBER"
      ],
      this.dicts
    );
    // 获取基础查询
    this.initOrgTree();
    // 获取表格数据
    this.getList(this.basicData);
  },
  methods: {
    // 根据id获取当前采集的样本
    getList(ids) {
      InformManageApi.oneSend.page(ids || this.ids).then(res => {
        if (res.status == 200) {
          this.tableData = res.data.data.records;
          this.total = res.data.data.total;
          if (res.data.data[0]) {
            this.rowData = res.data.data[0];
          }
        }
      });
    },
    // 获取基础查询
    initOrgTree() {
      orgApi.allTree({}).then(response => {
        const res = response.data;
        this.orgTree = res.data[0].children;
      });
    },
    // 根据选择市县获取医院
    clickOrgTree(v) {
      this.orgTreeC = [];
      this.orgTreeCs = [];
      this.basicData.model.hospitalId.key = "";
      this.basicData.model.departId.key = "";
      this.selectItem.hospitalId.key = "";
      this.selectItem.departId.key = "";
      this.orgTree.filter(res => {
        if (res.id == v) {
          this.orgTreeC = res.children;
        }
      });
    },
    // 根据选择市县获取医院
    clickOrgTreeC(v) {
      this.orgTreeCs = [];
      this.basicData.model.departId.key = "";
      this.selectItem.departId.key = "";
      this.orgTreeC.filter(res => {
        if (res.id == v) {
          this.orgTreeCs = res.children;
        }
      });
    },
    // 短信发送
    clickSend() {
      if (this.selectItem.momName != undefined) {
        this.$confirm("短信内容自动匹配对应实验结论", `本次发送1短信`, {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          InformManageApi.sendTextMessage.send([this.selectItem]).then(res => {
            if (res.status == 200) {
              this.$message({
                type: "success",
                message: "发送成功!"
              });
            }
          });
        });
      } else if (this.selectList.length > 0) {
        this.$confirm(
          "短信内容自动匹配对应实验结论",
          `本次发送${this.selectList.length}短信`,
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }
        )
          .then(() => {
            this.selectList.forEach(item => {
              InformManageApi.sendTextMessage.send([item]).then(res => {
                if (res.status == 200) {
                  this.$message({
                    type: "success",
                    message: "发送成功!"
                  });
                }
              });
            });
          })
          .catch(() => {});
      } else {
        this.$message.error("请选择数据");
      }
    },
    // 编辑发送
    clickEditSend() {
      if (this.selectList.length > 1) {
        this.$message.error("只能选择一条数据");
      } else if (this.selectList.length == 0) {
        this.$message.error("请选择数据");
      } else {
        this.selectItem = JSON.parse(JSON.stringify(this.selectList[0]));
        InformManageApi.oneSend
          .getExperimentContent(this.selectItem)
          .then(res => {
            this.selectItem = res.data.data;
            if (res.status == 200) {
              this.editLoading = true;
            }
          });
      }
    },
    // 编辑发送点击
    clickEditSendOk() {
      InformManageApi.oneSend.sendEditSmsReport(this.selectItem).then(res => {
        if (res.status == 200) {
          this.$message({
            type: "success",
            message: "发送成功!"
          });
          this.editLoading = false;
        } else {
          this.$message.error("发送失败!");
        }
      });
    },
    // 点击展示与收起
    onMoreStatus() {
      this.morderShow = !this.morderShow;
    },
    onSelectChange(data) {
      this.selectList = data;
    },
    // 基础信息按钮点击事件
    onSubmit(type) {
      if (type == "query") {
        switch (this.timeType) {
          // 出生日期"
          case "birthtime":
          case "":
            this.basicData.model.birthTime = {
              start: this.timeList[0],
              end: this.timeList[1]
            };
            this.basicData.model.bloodTime = {
              start: "",
              end: ""
            };
            this.basicData.model.createTime = {
              start: "",
              end: ""
            };
            this.basicData.model.experimentTime = {
              start: "",
              end: ""
            };
            this.basicData.model.reportTime = {
              start: "",
              end: ""
            };
            break;
          // 采血日期
          case "bloodtime":
            this.basicData.model.bloodTime = {
              start: this.timeList[0],
              end: this.timeList[1]
            };
            this.basicData.model.birthTime = {
              start: "",
              end: ""
            };
            this.basicData.model.createTime = {
              start: "",
              end: ""
            };
            this.basicData.model.experimentTime = {
              start: "",
              end: ""
            };
            this.basicData.model.reportTime = {
              start: "",
              end: ""
            };
            break;
          // 登记日期
          case "createtime":
            this.basicData.model.createTime = {
              start: this.timeList[0],
              end: this.timeList[1]
            };
            this.basicData.model.birthTime = {
              start: "",
              end: ""
            };
            this.basicData.model.bloodTime = {
              start: "",
              end: ""
            };
            this.basicData.model.experimentTime = {
              start: "",
              end: ""
            };
            this.basicData.model.reportTime = {
              start: "",
              end: ""
            };
            break;
          // 实验日期
          case "experimenttime":
            this.basicData.model.experimentTime = {
              start: this.timeList[0],
              end: this.timeList[1]
            };
            this.basicData.model.birthTime = {
              start: "",
              end: ""
            };
            this.basicData.model.bloodTime = {
              start: "",
              end: ""
            };
            this.basicData.model.createTime = {
              start: "",
              end: ""
            };
            this.basicData.model.reportTime = {
              start: "",
              end: ""
            };
            break;
          // 报告日期
          case "reporttime":
            this.basicData.model.reportTime = {
              start: this.timeList[0],
              end: this.timeList[1]
            };
            this.basicData.model.birthTime = {
              start: "",
              end: ""
            };
            this.basicData.model.bloodTime = {
              start: "",
              end: ""
            };
            this.basicData.model.createTime = {
              start: "",
              end: ""
            };
            this.basicData.model.experimentTime = {
              start: "",
              end: ""
            };
            break;
        }
        switch (this.codeType) {
          // 条形码号"
          case "barcode":
          case "":
            this.basicData.model.barCode = {
              start: this.codeList.start,
              end: this.codeList.end
            };
            this.basicData.model.bloodNum = {
              start: "",
              end: ""
            };
            this.basicData.model.expNum = {
              start: "",
              end: ""
            };
            this.basicData.model.freeNum = {
              start: "",
              end: ""
            };
            break;
          // 采血编号
          case "bloodnum":
            this.basicData.model.barCode = {
              start: this.codeList.start,
              end: this.codeList.end
            };
            this.basicData.model.bloodNum = {
              start: "",
              end: ""
            };
            this.basicData.model.expNum = {
              start: "",
              end: ""
            };
            this.basicData.model.freeNum = {
              start: "",
              end: ""
            };
            break;
          // 实验编号
          case "expnum":
            this.basicData.model.expNum = {
              start: this.codeList.start,
              end: this.codeList.end
            };
            this.basicData.model.bloodNum = {
              start: "",
              end: ""
            };
            this.basicData.model.barCode = {
              start: "",
              end: ""
            };
            this.basicData.model.freeNum = {
              start: "",
              end: ""
            };
            break;
          // 免费券号
          case "freenum":
            this.basicData.model.freeNum = {
              start: this.codeList.start,
              end: this.codeList.end
            };
            this.basicData.model.bloodNum = {
              start: "",
              end: ""
            };
            this.basicData.model.expNum = {
              start: "",
              end: ""
            };
            this.basicData.model.barCode = {
              start: "",
              end: ""
            };
            break;
        }
        this.getList(this.basicData);
      } else if (type == "reset") {
        this.$refs["basicForm"].resetFields();
        this.timeType = "";
        this.codeType = "";
        this.timeList = [];
        this.codeList = [];
      }
    },
    // 点击打印
    clickTruePrint() {
      this.handlePrintPrint();
    },
    // 打印事件
    handlePrintPrint() {
      if (this.upLoading) {
        this.$message({
          message: "数据加载中,请稍后...",
          type: "warning"
        });
      } else {
        this.CreateTablePage("print", "采血卡打印", "sampleManage");
      }
    },
    // 点击分页
    handleSizeChange: function(val) {
      this.basicData.size = val;
      this.getList(this.basicData);
    },
    // 选择页码
    handleCurrentChange: function(currentPage) {
      this.basicData.current = currentPage;
      this.getList(this.basicData);
    }
  }
};
</script>

<style lang="less">
.flex {
  display: flex;
  align-items: center;
  justify-content: center;
}
#oneSend {
  .el-range-separator {
    width: 10%;
  }
  .el-form-item__content,
  .el-date-editor,
  .el-select,
  .el-textarea {
    width: 100% !important;
  }
  .experimentList {
    width: 40%;

    .el-form-item__content {
      width: 80%;
    }
  }
  .mores {
    .flex;
    justify-content: flex-start;
    width: 100%;
    background: #188ff233;
    height: 30px;
    padding: 5px 8px;
    .more-title {
      font-family: SourceHanSansSC;
      font-style: normal;
      letter-spacing: 0px;
      line-height: 20px;
      text-decoration: none;
      margin-right: 1rem;
      font-size: 14px;
      font-weight: 500;
      color: #000;
    }
  }

  #more-row {
    #shiyan {
      .projectIdList {
        width: 100%;
        .el-form-item__content {
          width: 80%;
        }
      }
    }
    .more-col {
      .remark {
        width: 100%;
        .el-form-item__content {
          width: 90%;
        }
      }
    }
    .el-form-item {
      .el-form-item__content {
        width: 400px;
      }
    }
  }
  .buttom {
    width: 100%;
    .flex;
  }
  .el-dialog__header {
    border-bottom: 1px solid #e0e0e0;
  }
  .print-form {
    max-height: 500px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    flex-flow: wrap;
    .print-item {
      width: 50%;
      .flex;
      justify-content: flex-start;
      color: #222222;
      font-size: 15px;
      margin-top: 10px;
      .title {
        font-weight: bold;
        flex: 0.4;
      }
      .value {
        flex: 0.6;
        font-weight: bold;
        overflow-wrap: anywhere;
      }
    }
  }
  .el-dialog__footer {
    .flex;
  }
  .select-input {
    .el-form-item {
      margin: 0;
      .el-select .el-input {
        width: 100%;
      }
    }
    .flex;
    justify-content: flex-start;
    margin-bottom: 18px;
    .el-select .el-input {
      width: 110px;
    }
    .input-with-select .el-input-group__prepend {
      background-color: #fff;
    }
  }
}
</style>
